<template>
  <div class="controlPoint">
    <el-dialog v-model="addDialogVisible" title="添加控制点" width="300px">
      <el-form :model="newControlPoint" ref="addFormRef" :rules="addFormRules" label-width="100px">
        <el-form-item label="点名" prop="pointName">
          <el-input v-model="newControlPoint.pointName"></el-input>
        </el-form-item>
        <el-form-item label="坐标X" prop="coordinateX">
          <el-input v-model="newControlPoint.coordinateX"></el-input>
        </el-form-item>
        <el-form-item label="坐标Y" prop="coordinateY">
          <el-input v-model="newControlPoint.coordinateY"></el-input>
        </el-form-item>
        <el-form-item label="高程H" prop="elevationH">
          <el-input v-model="newControlPoint.elevationH"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="newControlPoint.description"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addControlPoint">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import {addControlPointApi} from "@/apis/api_controlPoint.js";
// 假设这里引入正确的 API 函数


// 添加对话框显示状态
const addDialogVisible = ref(false);


// 添加控制点的表单数据
const newControlPoint = reactive({
  pointName: "",
  coordinateX: "",
  coordinateY: "",
  elevationH: "",
  description: "",
});


// 添加表单验证规则
const addFormRules = {
  pointName: [
    { required: true, message: "点名不能为空", trigger: "blur" },
  ],
};

// 编辑表单验证规则
const editFormRules = {
  pointName: [
    { required: true, message: "点名不能为空", trigger: "blur" },
  ],
};

// 打开添加对话框
const openAddDialogVisible = () => {
  addDialogVisible.value = true;
  // 清空表单数据
  newControlPoint.pointName = "";
  newControlPoint.coordinateX = "";
  newControlPoint.coordinateY = "";
  newControlPoint.elevationH = "";
  newControlPoint.description = "";
};


const emit=defineEmits(["getData"]);
// 添加控制点方法
const addControlPoint = async () => {
  try {
    const res = await addControlPointApi(newControlPoint);
    console.log(res);
    ElMessage.success("添加控制点成功");
    addDialogVisible.value = false;
    emit("getData")
  } catch (error) {
    ElMessage.error("添加控制点失败，请重试");
    console.error(error);
  }
};

defineExpose({ openAddDialogVisible });
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}
</style>